<template>
  <commonpanel title="主要国家网球赛事">
    <div class="line2">
      <div class="itembox">
        <div class="itemwrap">
          <div class="boxwrap">
            <div class="numline">{{ 30 }}</div>
            <div class="desc">美国</div>
          </div>
          <div class="resultline">
            <span>同比</span>
            <img :src="false ? upimg : downimg" alt="" />
            <span>10%</span>
          </div>
        </div>
      </div>
      <div class="itembox itembox2">
        <div class="itemwrap">
          <div class="boxwrap">
            <div class="numline">{{ 20 }}</div>
            <div class="desc">澳大利亚</div>
          </div>
          <div class="resultline">
            <span>同比</span>
            <img :src="true ? upimg : downimg" alt="" />
            <span>5%</span>
          </div>
        </div>
      </div>
    </div>
  </commonpanel>
</template>
<script lang="ts" setup>
  import commonpanel from '@/components/common/panel.vue';
  import upimg from '@/assets/img/up.png';
  import downimg from '@/assets/img/down.png';
</script>
<style lang="scss" scoped>
  .line2 {
    margin-top: 26px;
    margin-left: 30px;
    margin-right: 30px;
    overflow: hidden;

    .itembox {
      width: 50%;
      float: left;
      height: 120px;

      .itemwrap {
        text-align: center;

        .boxwrap {
          display: inline-block;
          height: 82px;
          width: 146px;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .numline {
            font-size: 24px;
            font-family: D-DIN-Bold;
            color: #fff;
            line-height: 26px;
          }

          .desc {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #fff;
            line-height: 18px;
            opacity: 0.6;
            margin-top: 10px;
          }
        }
      }

      .resultline {
        height: 20px;
        text-align: center;

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          opacity: 0.6;
        }

        img {
          height: 20px;
          width: 20px;

          vertical-align: bottom;

          animation: breathe 1s ease-in-out infinite alternate;
          -webkit-animation: breathe 1s ease-in-out infinite alternate;
        }
      }
    }

    .itembox2::before {
      position: absolute;
      content: '';
      width: 1px;
      height: 100px;
      background-image: url('@/assets/img/img7.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>
